<template>
    <div class="app-container">

  
      <!-- 列表 -->
      <el-table
        v-loading="listLoading"
        :data="list"
        stripe
        border
        style="width: 100%;margin-top: 10px;">
        <el-table-column
          type="index"
          label="序号"
          width="50"
          align="center">
        </el-table-column>
  
        <el-table-column prop="courseName" label="课程名称" show-overflow-tooltip/>
        <el-table-column prop="name" label="授课老师" show-overflow-tooltip/>
        <el-table-column prop="type" label="课程类型" show-overflow-tooltip/>
        <el-table-column prop="description" label="课程描述" show-overflow-tooltip/>
        <el-table-column label="评星"  align="center" fixed="right">
            <template slot-scope="scope">
                <el-rate
                v-model="scope.row.avg"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}">
                </el-rate>
            </template>

        </el-table-column>
        <el-table-column label="操作"  align="center" fixed="right">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-plus" size="mini" @click="AddToMyCourse(scope.row.id)" title="添加到我的课"/>
            <el-button type="success" icon="el-icon-reading" size="mini" @click="StepPage(scope.row)" title="学习" />
            <el-button type="warning" icon="el-icon-chat-line-round" size="mini" @click="StepPinglun(scope.row)" title="查看评论" />
          </template>
        </el-table-column>
      </el-table>

    </div>
  </template>
  <style>
      .search-div {
          padding:10px;border: 1px solid #EBEEF5;border-radius:3px;
      }
      .tools-div {
          margin-top: 10px;padding:10px;border: 1px solid #EBEEF5;border-radius:3px;
      }
  </style>
  <script>
  import api from '@/api/LearnSpace/Course'
  const defaultForm = {
    id: '',
    avg: '',
    courseName: '',
    teacherId: '',
    url: '',
  }
  export default {
    data() {
      return {
        listLoading: true, // 数据是否正在加载
        list: null, // banner列表
      }
    },
    // 生命周期函数：内存准备完毕，页面渲染成功
    mounted() {
      this.fetchData()
    },
  
    methods: {
  
      
      // 加载banner列表数据
      fetchData() {
  
        api.getStarList().then(
          response => {
            this.list = response.data
            // 数据加载并绑定成功
            this.listLoading = false
          }
        )
      },
    //添加到我的课程
    AddToMyCourse(id){
    this.$confirm('确定加入课程?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
    }).then(() => {
        api.AddCourseToMe(id).then(resp => {
        this.$message({
        type: 'success',
        message: '好好学习，天天向上!'
        });
    })
    })
    },
    StepPage(o){
        this.$router.push('/LearnSpace/DetailVideo?id='+o.id+'&courseName='+o.courseName+'&teacherId='+o.teacherId);
    },
    StepPinglun(o){
        this.$router.push('/LearnSpace/PingLun?id='+o.id);
    }  


    }
  }
  </script>